import {
    Card,
    Pagination,
} from "antd";
import React from "react";
import {Component} from "react";
import {GET_COURSE_LIST, GET_COURSE_TAG, GET_COURSE_TYPE, SERVER_PICTURE_URL} from "../../api/APIURLDefine";
import {AxioInstance} from "../../api/AxiosHelper";
import {model} from "../../model/model";
import "./index.less";
import KeywordFilterSearch from "../../components/KeywordFilterSearch";
import {PageData} from "../../model/PageData";
import {inject, observer} from "mobx-react";
import {ResetImageHeight} from "../../utils/Utils";

interface CourseResourceState {
    dataSource?: PageData<model.Course>;
    currentSelect: number;
    page: number;
    total: number;
    mode: number;
    courseType: Array<any>;
    courseTag: Array<any>;
}

@inject("courseStore")
@observer
class CourseResource extends Component<any, CourseResourceState> {
    constructor(props: any) {
        super(props);
        this.state = {
            dataSource: null,
            currentSelect: 0,
            total: 0,
            page: 1,
            mode: 0,
            courseType: [],
            courseTag: []
        };
    }

    componentDidMount() {
        var params = new URLSearchParams(this.props.history.location.search);
        // console.log(params);
        var mode = 1;
        if (params.has("mode")) {
            mode = parseInt(params.get("mode"));
        }
        const course = this.props.courseStore;
        course.SetCourse(0);
        course.SetPageSize(10);
        course.SetMode(mode);
        course.SetPage(0)
        //获取课程类型
        course.getTypeAndTag();
        course.getData();
        window.onresize = function (e) {
            ResetImageHeight();
        }
    }

    onChange(page, pageSize) {
        const course = this.props.courseStore;
        course.SetPage(page);
        course.getData();
    }

    resetPagination(){
        const course = this.props.courseStore;
        course.SetPage(1);
    }
 
    render() {
        const course = this.props.courseStore;
        return (
            <div className="course-list-container">
                <div className={course.more ? "header-more" : "header-less"} style={{width: "14rem", margin: "0 auto"}}>
                    <KeywordFilterSearch
                    resetHomePage={this.resetPagination.bind(this)}
                    // resetHomePage={null}
                        filters={[
                            {
                                title: "课程类型",
                                multiple: false,
                                keywords: course.types,
                            },
                            {
                                title: "课程标签",
                                multiple: false,
                                keywords: course.tags,
                            },
                        ]}
                    />
                </div>
                <div className="course-container"  style={{width: "14rem", margin: "0.2rem auto",height:"4.85rem"}}>
                    {
                        course.data?.records.map((element, index) => {
                            return <Card
                                key={index}
                                bordered={false}    
                                className="course-list-card-course-resource"
                                bodyStyle={{padding: 0, background: "white", borderRadius: "0.04rem"}}
                                style={{backgroundColor: "#ffffff00"}}
                                onClick={() => this.props.history.push({
                                    pathname: "/course",
                                    search: "id=" + element.id
                                })}
                            >
                                <div
                                    style={{
                                        width: "100%",
                                        height: "auto",
                                        overflow: "hidden",
                                    }}
                                >
                                    <div
                                        id="img-container"
                                        style={{
                                            width: "100%"
                                        }}
                                    >
                                        <img
                                            className="img-animation"
                                            style={{
                                                objectFit: "cover",
                                                width: "100%",
                                                height: "100%",
                                                borderRadius: "0.04rem"
                                            }}
                                            onLoad={()=>{
                                                ResetImageHeight();
                                            }}
                                            src={SERVER_PICTURE_URL + "/" + element.courseImg}
                                        />
                                    </div>
                                </div>

                                <h3
                                    className="hide-text-1-column"
                                    style={{
                                        color: "#333333",
                                        fontSize: "0.2rem",
                                        marginTop: "0.13rem",
                                        marginBottom: "0.13rem",
                                        paddingLeft: "0.2rem"
                                    }}>{element.courseName}</h3>
                                <h4
                                    style={{
                                        color: "#666666",
                                        fontSize: "0.18rem",
                                        wordWrap: "break-word",
                                        textOverflow: "ellipsis",
                                        overflow: "hidden",
                                        whiteSpace: "nowrap",
                                        paddingLeft: "0.2rem"
                                        // textSpace: "0.03rem"
                                    }}
                                >{element?.teacherInfo ? `${element.teacherInfo.name} | ${element.teacherInfo.titles}` : `暂无老师信息`}</h4>
                            </Card>
                        })
                    }
                </div>
                <div className="coursePagination">
                    <Pagination current={course.page} style={{float: "right", height: "0.32rem"}}
                                onChange={this.onChange.bind(this)}
                                total={course.total}/>
                </div>
            </div>
        );
    }
}

export default CourseResource;


/*
*    <List<model.Course>
                    grid={{
                        gutter: 16,
                        xs: 1,
                        sm: 2,
                        md: 4,
                        lg: 4,
                        xl: 6,
                        xxl: 6,
                    }}
                    dataSource={this.state.dataSource?.records}
                    renderItem={(item) => (
                        <List.Item>
                            <Card
                                className="course-card"
                                bodyStyle={{padding: "0", height: "2.4rem"}}
                                onClick={() => this.props.history.push({pathname: "/course", search: "id=" + item.id})}
                            >
                                <div
                                    style={{
                                        width: "100%",
                                        height: "1.8rem",
                                        overflow: "hidden",
                                    }}
                                >
                                    <div
                                        className="course-img"
                                        style={{
                                            width: "100%",
                                            height: "1.8rem",
                                        }}
                                    >
                                        <img
                                            style={{
                                                objectFit: "cover",
                                                width: "100%",
                                                height: "100%",
                                            }}
                                            src={SERVER_PICTURE_URL + "/" + item.courseImg}
                                        />
                                    </div>
                                </div>

                                <h3>{item.courseName}</h3>
                                <h4
                                    style={{color: "#9C9C9C"}}
                                >{`刚刚的小跟班|教授、硕士生导师`}</h4>
                            </Card>
                        </List.Item>
                    )}
                />*/